<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps({
  titles: {type: Array, required: true},
  icon: {type: String, required: true},
  width: {type: String, required: true},
  fw: {type: String, required: true},
  iw: {type: String, required: true},
  service: {type: String, required: true},
})
const state = ref({
  current: -1
})
const navCase = (i) => {
  router.push(`/service-case/${props.service}/${i}`)
}
</script>

<template>
  <view class="case-grid top10" :style="{gridTemplateColumns: `repeat(4,${width})`}">
    <view v-for="(item, i) in titles" :key="i" class="column item" @click="navCase(i)"
          @mouseenter="state.current = i" @mouseleave="state.current = -1">
      <img :src="`../images/icon_outer/${icon}_${i}.png`" alt="" :width="iw"
           :style="state.current === i ? 'transform:scale(1.3)':''"/>
      <view class="top8 font24" :style="{width: `${fw}`}">{{ item }}</view>
    </view>
  </view>
</template>

<style scoped>
.case-grid {
  display: grid;
  text-align: center;
  grid-row-gap: 28%;

  .item {
    align-items: center;
    cursor: pointer;

    img {
      transition: all 0.5s;
    }
  }
}
</style>